<style scoped lang="less">
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	
	.el-table{
		width: 100vh;
	}
	.fomeflex{
		margin-left: 0px;
		margin-top: 20px;
		display: flex;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.top{
		display: flex;
		justify-content: space-between;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header>
			 <Header></Header>
		</el-header>
	     <el-main>
			 <div class="top">
				<h3>会员标签</h3>
				<el-button type="primary" v-if="counter.btnsObj.addFlag" @click="add">{{counter.btnsObj.addName}}</el-button>  
			 </div>
			 
			 <!-- 添加标签对话框 -->
			 <el-dialog v-model="dialogFormVisible" :title="Tiptitle" width="500">
			    <el-form :model="form"
					ref="ruleFormRef"
					:rules="rules"
					label-width="auto">
			 		<el-form-item prop="userTagName" label="标签名称" label-width="100" >
			 			<el-input v-model="form.userTagName"  
						autocomplete="off" placeholder="请输入标签名称" style="width:250px"/>
			 		</el-form-item>
			 		<el-form-item prop="userTagNotes" label="备注" label-width="100">
			 			<el-input
			 			    v-model="form.userTagNotes"
			 			    maxlength="30"
			 			    style="width: 250px"
			 			    placeholder="请输入备注"
			 			    show-word-limit
			 			    type="textarea"
			 			  />
			 		</el-form-item>
			 		<el-form-item prop="userTagSort" label="排序" label-width="100">
			 			<el-input
			 			    v-model="form.userTagSort"
			 			    style="width: 250px"
			 			    maxlength="10"
			 			    placeholder="请输入排序"
			 			    show-word-limit
			 			    type="text"
			 			  />
			 		</el-form-item>
					<el-form-item>
						<!-- <template #footer> -->
						  <div class="dialog-footer">
						    <el-button @click="dialogFormVisible = false">取消</el-button>
						    <el-button type="primary" @click="sure(ruleFormRef)">
						      确定
						    </el-button>
						  </div>
						<!-- </template> -->
					</el-form-item>
			     </el-form>
			     
			</el-dialog>
			 <div class="fomeflex">
			 	<el-form-item label="标签名称">
			 		<el-input
					v-model="tagname.userTagName"
			 		  style="width: 240px;height: 36px;"
			 		  size="large"
			 		  placeholder="请输入标签名称"
			 		/>
			 	</el-form-item>
			 	<el-button type="primary" @click="search">搜索</el-button>
			 	<el-button @click="reset">重置</el-button>
			 </div>
			 <el-table :data="tableData" style="width: 100%" height="60vh">
			 	<el-table-column prop="userTagName" label="标签名称"  />
			 	<el-table-column prop="userCount" label="会员数量" />
			 	<el-table-column prop="userTagNotes" label="备注" />
			 	<el-table-column prop="userTagSort" label="排序" />
			 	<el-table-column label="操作">
					<template #default="opt">
						<span class="mya" @click="edit(opt.row)">修改</span>
						<span class="mya" @click="del(opt.row)">删除</span>
					</template>
				</el-table-column>
			 </el-table>
			 
			 <el-pagination
			 	layout="prev,pager,next"
			 	:page-count="total"
			 	:page-size="pageSize"
			 	v-model:current-page="pageIndex"	
			 	@current-change="changePage"
			 ></el-pagination>
			 <!-- 删除提示模态框 -->
			 <el-dialog
			     v-model="dialogVisible"
			     title="Tips"
			     width="500"
			   >
			     <span>确定要删除该标签吗？</span>
			     <template #footer>
			       <div class="dialog-footer">
			         <el-button @click="dialogVisible = false">取消</el-button>
			         <el-button type="primary" @click="confirmDel">
			           确认
			         </el-button>
			       </div>
			     </template>
			   </el-dialog>
		 </el-main>
	   </el-container>
	 </div>	
</template>
<script setup>
	
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from "../stores/counter"
	import { ElMessage } from 'element-plus'
	let route = useRoute();
	let router = useRouter();
	let counter = useCounterStore();
	counter.btns = route.meta.btns

import Header from '@/components/Header.vue'
import { ref,reactive,onMounted} from 'vue'
import {GitVipTagList,AddVipTag,DelVipTag,UpdateVipTagsIn} from "@/api"
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
let pageIndex=ref(1);
	let pageSize=10;
	let total=ref(0)
const tableData =ref([])

//获取会员标签列表
const viptaglist =async ()=>{
	let res = await GitVipTagList({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId"))
	})
	// console.log("会员标签列表",res)
	tableData.value = res.userTagList
	total.value=res.pageCount
}
let tagname = reactive({
	userTagName:""
})
const reset=()=>{
	tagname.userTagName=""
	viptaglist();
}
//点击搜索
const search = async ()=>{
	let rop = await GitVipTagList({
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
		userTagName:tagname.userTagName
	})
	// console.log("souso",rop)
	tableData.value = rop.userTagList
	total.value=rop.pageCount
}

//添加会员标签
// 表单校验
	const ruleFormRef=ref(null);
	const rules = reactive({
		userTagName:[
			{ required: true, message: '请输入标签名称', trigger: 'blur' },
		],
		userTagNotes:[
			{ required: true, message: '请输入备注', trigger: 'blur' },
		],
		userTagSort:[
			{ required: true, message: '请输入排序', trigger: 'blur' },
		],
	})
let form = reactive({
	userTagName:"",
	userTagNotes:"",
	userTagSort:"",
})
let Tiptitle = ref("添加标签")
const add = ()=>{
	Tiptitle.value = "添加标签"
	dialogFormVisible.value=true
	form = reactive({
		userTagName:"",
		userTagNotes:"",
		userTagSort:"",
	})
}

//点击编辑
const edit=(row)=>{
	Tiptitle.value = "修改标签"
	dialogFormVisible.value = true
	sessionStorage.setItem("userTagId",row.userTagId)
	form.userTagName =row.userTagName
	form.userTagNotes=row.userTagNotes
	form.userTagSort=row.userTagSort
}


//点击添加会员标签中的确定
const sure = (ruleForm)=>{
	ruleForm.validate(async(valid) => {
	    if (valid) {
			// 表单验证成功
			if(sessionStorage.getItem("userTagId")){
				let result = await UpdateVipTagsIn({
					userTagId:Number(sessionStorage.getItem("userTagId")),
					userTagName:form.userTagName,
					userTagNotes:form.userTagNotes,
					userTagSort:Number(form.userTagSort),
				})
				if(result != undefined){
					ElMessage.success(result)
				}
				viptaglist()
			}else{
				let result = await AddVipTag({
					userTagName:form.userTagName,
					userTagNotes:form.userTagNotes,
					userTagSort:form.userTagSort,
					siteId:Number(sessionStorage.getItem("siteId")),
				})
				// console.log("result", result)
				if(result != undefined){
					ElMessage.success(result)
				}
				viptaglist()
			}
			sessionStorage.removeItem("userTagId")
			sessionStorage.removeItem("userTag")
			dialogFormVisible.value = false
	    } else {
			// 验证不通过
			ElMessage.error('输入信息不正确');
			return false;
	    }
	});	
}

//删除会员标签
let dialogVisible=ref(false)
const del =  (row)=>{
	dialogVisible.value=true;
	sessionStorage.setItem("delUserTagId",row.userTagId)
}
const confirmDel = async() =>{
	let aaa = await DelVipTag({
		userTagId:sessionStorage.getItem("delUserTagId")
	})
	dialogVisible.value=false;
	viptaglist()
	ElMessage({
	    message: '删除成功',
	    type: 'success',
	  })
	// changePage()
	
}
//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		search()
	}
	const row=reactive({})
	onMounted(()=>{
		viptaglist()
	})
</script>
